<template>
  <div class="count">
    <h1>Count</h1>
    <h2>当前的num值是:{{$store.state.num}}</h2>
    <h2>当前的doubleNum值是：{{$store.getters.doubleNum}}</h2>
    <div>
      <button @click="$store.commit('increment')">累加num-原始操作</button>
      <button @click="increment">累加num-封装操作</button>
        <!-- 可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
        在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读 -->
   <button @click="$store.commit('incrementN',{n:2})">累加N--num--原始操作</button>
   <button @click="incrementN({n:2})">累加N--num--封装方法操作</button>
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
name:"Count",
mounted(){
    console.log(this);
      // mapMutations有数组和对象写法,帮我们快速的生成一个methods对象,包含提交mutations的方法
},
methods:{
  ...mapMutations(["increment","incrementN"])
}
}
</script>

<style scoped>
.count{
    background: pink;
}
</style>